<template>
  <el-dialog append-to-body v-model="dialogVisible" title="会议室列表" width="70%">
    <el-button @click="handleAdd"  class="button-header"  type="primary" :icon="Plus">添加会议室</el-button>
    <el-form inline :model="query" class="filter" label-width="100px">
    <el-form-item label="会议名称：">
      <el-col :span="22">
        <el-input v-model="query.name" placeholder="请输入会议名称" />
      </el-col>
    </el-form-item>
    <el-form-item class="filter-actions">
      <el-button class="button-small" type="primary" @click="handleSearch">筛选</el-button>
      <el-button type="text" class="button-reset" @click="handleClear">重置筛选条件</el-button>
    </el-form-item>
    </el-form>
    <el-table :data="tableData" @sort-change="handleSortChange">
      <el-table-column prop="name" label="会议室名称" />
      <el-table-column prop="area" sortable label="面积" />
      <el-table-column prop="people" sortable label="容纳人数" />
      <el-table-column prop="foor" label="楼层" />
      <el-table-column prop="height" label="高度" />
      <el-table-column prop="length" label="长度" />
      <el-table-column prop="width" label="宽度" />
      <el-table-column prop="isColumn" label="是否有柱子">
        <template #default="scope">
          <span v-if="scope.row.isPost">有</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="180" sortable prop="sequence">
        <template #default="scope">
          <el-input-number v-model="scope.row.sequence" controls-position="right" @change="handleChangeSequence(scope.row)" :min="0" :max="99999999" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right" width="200">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-popconfirm :width="200" class="btn-popconfirm" @confirm="handleDelete(scope.row.id)" confirmButtonText="确认" cancelButtonText="取消" title="确定要删除该场地吗？">
            <template #reference>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
   
   <el-dialog append-to-body :title="postForm.title" v-model="postForm.dialogVisible" width="850px">
    <el-form ref="postFormRef" label-width="150px" class="ruleForm" :model="postForm.form" :rules="postForm.rules">
      <el-form-item label="会议室名称：" prop="name">
        <el-col :span="22">
          <el-input v-model="postForm.form.name" maxlength="20" show-word-limit placeholder="请输入会议室名称" />
        </el-col>
      </el-form-item>
      <el-form-item label="面积：" prop="area">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.area" :precision="2" :min="0" controls-position="right" /> m²
        </el-col>
      </el-form-item>
      <el-form-item label="容纳人数：" prop="people">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.people" :precision="0" :min="0" controls-position="right" /> 人
        </el-col>
      </el-form-item>
      <el-form-item v-for="(item , index) in postForm.form.layouts" :key="index" :label="layoutIdDesc(item.typeId) +'：'">
        <el-col :span="22">
          <el-input-number v-model="item.people" :precision="0" :min="0" controls-position="right" /> 人
        </el-col>
      </el-form-item>
      <el-form-item label="参考价格：" prop="price">
        <el-col :span="22">
          ￥ <el-input-number v-model="postForm.form.price" :precision="2" :min="0" controls-position="right" />
        </el-col>
      </el-form-item>
      <el-form-item label=" 楼层：" prop="foor">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.foor" :precision="0" :min="0" controls-position="right" /> 楼
        </el-col>
      </el-form-item>
      <el-form-item label="高度：" prop="height">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.height" :precision="1" :min="0" controls-position="right" /> m
        </el-col>
      </el-form-item>
      <el-form-item label="长度：" prop="length">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.length" :precision="1" :min="0" controls-position="right" /> m
        </el-col>
      </el-form-item>
      <el-form-item label="宽度：" prop="width">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.width" :precision="1" :min="0" controls-position="right" /> m
        </el-col>
      </el-form-item>
      <el-form-item label="灯下高度：" prop="lampHeight">
        <el-col :span="22">
          <el-input-number v-model="postForm.form.lampHeight" :precision="1" :min="0" controls-position="right" /> m
        </el-col>
      </el-form-item>
      <el-form-item label="是否有柱子：">
        <el-col :span="22">
          <el-switch v-model="postForm.form.isColumn" />
        </el-col>
      </el-form-item>
      <el-form-item label="图片：" prop="images">
        <choose-file tips="建议尺寸800x800像素" :limit="12" v-model="postForm.form.images" />
      </el-form-item>
      <el-form-item label="特色：">
        <el-col :span="22">
          <features  :type="PositionType.Meeting" multiple v-model="postForm.form.facilitieIds" />
        </el-col>
      </el-form-item>
      <el-form-item label="设施：">
        <el-col :span="22">
          <facilities  :type="PositionType.Meeting" multiple v-model="postForm.form.featuresIds" />
        </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="postForm.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave(postFormRef)">确定</el-button>
      </span>
    </template>
   </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { LayoutType, PositionType } from '@/utils/enum'
import { GetMeetings, MeetingSave,GetMeetingDetails,MeetingDelete,UpdateMeetingSequence } from '@/api/site'
import { ElMessage, ElForm } from 'element-plus'
import ChooseFile from '@/components/ChooseFile.vue'
import Facilities from '@/components/Facilities.vue'
import Features from '@/components/Features.vue'

interface Props {
  visible: boolean,
  venueId:number,
}
const props = withDefaults(defineProps<Props>(), {
  visible:false,
  venueId:0,
})

const postForm = ref<DialogForm<MeetingRoomEdit>>({
  dialogVisible: false, 
  title:'添加会议室',
  form: {
    id: 0,
    venueId: 0,
    name:'',
    area: 0,
    people: 0,
    foor: 0,
    length: 0,
    width: 0,
    height: 0,
    lampHeight: 0,
    price: 0,
    isColumn: false,
    layouts:[
      {id: 0, typeId: LayoutType.Theatre, venueId: 0, meetingRoomId: 0, people: 0 },
      {id: 0, typeId: LayoutType.Desk, venueId: 0, meetingRoomId: 0, people: 0 },
      {id: 0, typeId: LayoutType.Banquet, venueId: 0, meetingRoomId: 0, people: 0 },
      {id: 0, typeId: LayoutType.UShaped, venueId: 0, meetingRoomId: 0, people: 0 },
      {id: 0, typeId: LayoutType.FishBone, venueId: 0, meetingRoomId: 0, people: 0 },
      {id: 0, typeId: LayoutType.Directorate, venueId: 0, meetingRoomId: 0, people: 0 },
      {id: 0, typeId: LayoutType.Reception, venueId: 0, meetingRoomId: 0, people: 0 },
    ],
    facilitieIds: [],
    images: [],
    featuresIds: []
  },
  rules: {
    name: [{ required: true, message: '请输入会议室名称', trigger: 'blur' }],
    area: [{ required: true, message: '请输入会议室面积', trigger: 'blur' }],
    people: [{ required: true, message: '请输入容纳人数', trigger: 'blur' }],
    Price: [{ required: true, message: '请输入建议价格', trigger: 'blur' }],
    foor: [{ required: true, message: '请输入楼层', trigger: 'blur' }],
    height: [{ required: true, message: '请输入高度', trigger: 'blur' }],
    length: [{ required: true, message: '请输入长度', trigger: 'blur' }],
    width: [{ required: true, message: '请输入宽度', trigger: 'blur' }],
    lampHeight: [{ required: true, message: '请输入灯下高度', trigger: 'blur' }],
    images: [{ type: 'array', required: true, message: '请上传图片', trigger: 'change' }],
    facilitieIds: [{ type: 'array', required: true, message: '请选择设施', trigger: 'change' }],
    featuresIds: [{ type: 'array', required: true, message: '请选择特色', trigger: 'change' }]
  }
})

/**
 * 查询条件
 */
const query = reactive({
  /**
   * 会议室名称
   */
  name:''
})

/**
 * 会议室列表
 */
const tableData = ref<MeetingRoomView[]>([])
type FormInstance = InstanceType<typeof ElForm>
const postFormRef = ref<FormInstance>()

/**
 * 布局名称
 */
const layoutIdDesc = (typeId: LayoutType): string => {
  switch(typeId) {
    case LayoutType.Theatre: return '剧院式'
    case LayoutType.Desk: return '课桌式'
    case LayoutType.Banquet: return '圆桌式'
    case LayoutType.UShaped: return 'U型式'
    case LayoutType.FishBone: return '鱼骨式'
    case LayoutType.Directorate: return '董事会式'
    case LayoutType.Reception: return '酒会式'
    default: return ''
  }
}

const handleAdd = ():void => {
  postForm.value.dialogVisible = true
  postForm.value.title = '添加会议室' 
  postForm.value.form.id = 0
  postForm.value.form.venueId = props.venueId
  postForm.value.form.name = ''
  postForm.value.form.area = 0
  postForm.value.form.people = 0
  postForm.value.form.foor = 0
  postForm.value.form.length = 0
  postForm.value.form.width = 0
  postForm.value.form.height = 0
  postForm.value.form.lampHeight = 0
  postForm.value.form.price = 0
  postForm.value.form.isColumn = false
  postForm.value.form.layouts = [
    {id: 0, typeId: LayoutType.Theatre, venueId: 0, meetingRoomId: 0, people: 0 },
    {id: 0, typeId: LayoutType.Desk, venueId: 0, meetingRoomId: 0, people: 0 },
    {id: 0, typeId: LayoutType.Banquet, venueId: 0, meetingRoomId: 0, people: 0 },
    {id: 0, typeId: LayoutType.UShaped, venueId: 0, meetingRoomId: 0, people: 0 },
    {id: 0, typeId: LayoutType.FishBone, venueId: 0, meetingRoomId: 0, people: 0 },
    {id: 0, typeId: LayoutType.Directorate, venueId: 0, meetingRoomId: 0, people: 0 },
    {id: 0, typeId: LayoutType.Reception, venueId: 0, meetingRoomId: 0, people: 0 },
  ]
  postForm.value.form.facilitieIds = []
  postForm.value.form.images = []
  postForm.value.form.featuresIds = []
}
/**
 * 搜索
 * @param row 
 */
const handleSearch = ():void => {
  loadData()
}

/**
 * 重置
 */
const handleClear = (): void => {
  query.name = ''
  loadData()
}
let isAsc = false
let sortName = 'sequence'
const handleSortChange = (data: any) => {
  sortName = data.prop
  isAsc = data.order === 'ascending'
  SortTableData()
}
const SortTableData = ():void => {
   switch(sortName)
   {
    case 'area': 
      if(isAsc) 
        tableData.value =tableData.value.sort(function(a, b) { return a.area - b.area })
      else
        tableData.value =tableData.value.sort(function(a, b) { return b.area - a.area })
      break
    case 'people':
      if(isAsc) 
        tableData.value =tableData.value.sort(function(a, b) { return a.people - b.people })
      else
        tableData.value =tableData.value.sort(function(a, b) { return b.people - a.people })
      break
    case 'sequence':
      if(isAsc) 
          tableData.value =tableData.value.sort(function(a, b) { return a.sequence - b.sequence })
        else
          tableData.value =tableData.value.sort(function(a, b) { return b.sequence - a.sequence })
   }
 
}
/**
 * 修改
 * @param formEl 
 */
const handleEdit = (id:number):void => {
  postForm.value.form.id = id
  postForm.value.dialogVisible = true
  postForm.value.title = '编辑会议室'
  GetMeetingDetails(postForm.value.form.id).then((res:ServiceResponse<MeetingRoomEdit>) => {
    if(res.success) {
      postForm.value.form = res.data ?? postForm.value.form
    }
  })
}

/**
 * 删除
 * @param formEl 
 */
const handleDelete = (id:number):void => {
  MeetingDelete(id).then(((res:ServiceResponse<any>) => {
    if(res.success) {
          ElMessage.success('删除成功')
          loadData()
        } else  ElMessage.error(res.msg)
  }))
}

/**
 * 保存
 * @param formEl 
 */
const handleSave = (formEl: FormInstance | undefined): void => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      MeetingSave(postForm.value.form).then((res:ServiceResponse<any>) => {
        if(res.success) {
          ElMessage.success('保存成功')
          loadData()
          postForm.value.dialogVisible = false
        } else if(res.msg) {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}

/**
 * 修改排序
 * @param row 
 */
const handleChangeSequence = (row:Brand):void => {
  UpdateMeetingSequence(row.id,row.sequence).then((res:ServiceResponse<any>) => {
    if(res.success) {
          ElMessage.success('保存成功')
          loadData()
        } else  ElMessage.error(res.msg)
  })
}

 /**
  * 加载数据
  */
const loadData = ():void => {
  GetMeetings(props.venueId, query.name).then((res:ServiceResponse<MeetingRoomView[]>) => {
    if(res.success) {
      tableData.value = res.data ?? []
      SortTableData()
    }
  })
}

/**
 * 监听dialogVisible变化
 */
watch(()=>props.visible,() => {
  loadData()
})

interface Emits {
     (e: 'update:visible', dialogVisible: boolean): void,
     (e: 'on-confirm'): void
}
const emit = defineEmits<Emits>()
const dialogVisible = computed(
 {
   get() {
      return props.visible
    },
    set(visible: boolean) {
     
      emit('update:visible', visible)
      emit('on-confirm')
    }
 }
)
</script>
<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/tablePage.scss";

</style>